<!DOCTYPE html>
<html>
<head>
    <title>Markdown Viewer</title>
</head>
<body>
    <div id="toc"></div>
    <div id="content"></div>
<script src="../assets/js/marked.min.js"></script>
<script>
    function generateToc(content) {
        const tocEl = document.getElementById('toc');
        let tocContent = '';
        const headings = content.match(/^#{1,6}\s+(.*)$/gm);
        if (headings) {
            tocContent += '<ul>';
            headings.forEach((match) => {
                const level = match.trim().split(' ')[0].length;
                const title = match.trim().split(' ')[1];
                const anchor = `#heading_${title.replace(/\s+/g, '_')}`;
                tocContent += `<li><a href="${anchor}">${title}</a></li>`;
            });
            tocContent += '</ul>';
        }
        tocEl.innerHTML = tocContent;
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                var responseText = xhr.responseText;
                var contentEl = document.getElementById('content');
                contentEl.innerHTML = marked.parse(responseText, { mangle: false });
                generateToc(responseText);
            } else {
                console.log('Request failed. Status: ' + xhr.status);
            }
        }
    };
    xhr.open('GET', 'test.md', true);
    xhr.send();
</script>
</body>
</html>

